<template>
	<view class="get-loaction">
		<view class="status-bar"> </view>
		<view class="search-box">
			<image src="/static/icon/navbar/left.png" @click="getLoaction.goBack()" class="left" />
			<view class="search">
				<image src="/static/icon/mine/search.png" class="search-img" />
				<input v-model="searchVal" type="text" class="input" @confirm="getLoaction.search" placeholder="搜索地点" placeholder-style="color: #888888;font-size: 14px;" />
			</view>
		</view>
		<Map :lat="lat" :lon="lon" />
		<view class="address-box">
			<view class="address-title">
				<view class="left">
					<image src="/static/icon/shop/nav.png" class="nav" />
					<view class="text"> 伙计工业园 </view>
				</view>
				<view class="right">
					<image src="/static/icon/home/loca.png" class="loca" />
					<view class="text"> 重新定位 </view>
				</view>
			</view>
			<scroll-view class="address-list" :scroll-y="true" :show-scrollbar="false" :style="{height:h}">
				<view class="address-item" v-for="iten in 5">
					<view class="address-info">
						<view class="address-name a-address">
							等哈杀杀杀16栋
						</view>
						<view class="address-intro">
							查杀是挨晒等哈说撒谎嗲是100号
						</view>
					</view>
					<view class="checked">
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import Map from '@/components/Map.vue';
	import { useAddressStore } from '@/store/index.js'
	const lat = computed(() => {
		const { lonlat } = useAddressStore()
		return lonlat.latitude
	})
	const lon = computed(() => {
		const { lonlat } = useAddressStore()
		return lonlat.longitude
	})
</script>

<style lang="scss" scoped>
	.get-loaction {
		background-color: #fff;
		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.search-box {
			height: 44px;
			padding: 0 12px;
			display: flex;
			align-items: center;
			background-color: #fff;
			.left {
				width: 18px;
				height: 20px;
				margin-right: 12px;
			}
			.search {
				flex: 1;
				height: 32px;
				display: flex;
				align-items: center;
				background: #F4F4F4;
				border-radius: 170px;
				padding: 0 10px;
				.search-img {
					width: 14px;
					height: 14px;
					margin-right: 10px;
				}
				.input {
					color: #888888;
					font-size: 14px;
					font-weight: 400;
				}
			}
		}
		#amap {
			width: 750rpx;
			height: 750rpx;
			background-color: aqua;
		}
		.address-box {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;
			padding: 10px 12px;
			background-color: #fff;
			border-radius: 10px 10px 0 0;
			.address-title {
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e4e4e4;
				box-sizing: border-box;
				.left {
					display: flex;
					align-items: center;
					.nav {
						width: 18px;
						height: 18px;
						margin-right: 10px;
					}
					.text {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						line-height: 16px;
					}
				}
				.right {
					display: flex;
					align-items: center;
					.loca {
						width: 16px;
						height: 16px;
						margin-right: 2px;
					}
					.text {
						color: #008FF4;
						font-size: 12px;
						font-weight: 400;
					}
				}
			}
			.address-list {
				.address-item {
					height: 60px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #e4e4e4;
					box-sizing: border-box;
					.address-info {
						.address-name {
							color: #333333;
							font-size: 14px;
							font-weight: 400;
							line-height: 21px;
							&.a-address {
								position: relative;
								padding-left: 66px;
								&::before {
									display: block;
									content: '[当前位置]';
									position: absolute;
									left: 0;
									top: 50%;
									transform: translateY(-50%);
									color: #008FF4;
									font-size: 14px;
									font-weight: 400;
									line-height: 21px;
								}
							}
						}
						.address-intro {
							color: #999999;
							font-size: 12px;
							font-weight: 400;
							line-height: 21px;
						}
					}
				}
			}
		}
	}
</style>
